<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
		<template #top>
	<!-- 		<view class="tab">
				<view class="li" @click="onTypeClick(0)" :class="type == 0 ? 'on':''">
					<text>参与的</text>
				</view>
				<view class="li" @click="onTypeClick(1)" :class="type == 1 ? 'on':''">
					<text>发布的</text>
				</view>
			</view> -->
		</template>
		<view class="list">
			<view class="li" 
				   @click="onJmup('/pages/reserve/activity/details?id='+item.id)" 
				   v-for="(item,index) in dataList" :key="index"
				   >
				
				<view class="desc">
					<image class="le-img" :src="item.image" mode="aspectFill"></image>
					<view class="desc-info">
						<view class="desc-title">
							<text>{{item.title}}</text>
						</view>
						
						<view class="desc-span">
							<view class="li">{{item.ctitle}}</view>
						</view>
						
						<view class="desc-txt">
							<!-- <image :src="baseUrl + '/static/wximages/icon-06.png'" mode="widthFix"></image> -->
							<text>{{item.date}}</text>
						</view>
						
						<view class="desc-txt">
							<!-- <image :src="baseUrl + '/static/wximages/icon-07.png'" mode="widthFix"></image> -->
							<view class="addres">
								<text>{{item.address}}</text>
								<view class="juli">
									<image :src="baseUrl + '/static/wximages/icon-20.png'" mode="widthFix"></image>
									<text>{{item.distance}}km</text>
								</view>
							</view>
							
						</view>
						
						<view class="desc-mod">
							<view class="browsing-history">
								<view class="browsing-history-tx">
									<image v-for="(x, idx) in item.record"
									:src="x.user_avatar" 
									mode="aspectFill"></image>
								</view>
								<text :style="'margin-left: '+ (15 * ( item.record.length < 3 ? item.record.length + 1 : 4)) +'rpx;'">{{item.record.length}}人参加</text>
								
							</view>
							<view class="user-cz">
								<view v-if="type == 1" @click.stop="onDel(index)" class="sbtn">删除</view>
								<view v-if="type == 1" @click.stop="onEdit(item.id)" class="sbtn">修改</view>
							</view>
						</view>
						
						
						
						
						
					</view>
				</view>
				
			</view>
		</view>
	
	
		</z-paging>
	</view>
</template>

<script>
	import TbarNav from '@/components/TbarNav'
	import { getCircleList,userCircleDel } from '@/api/reserve.js';
	export default {
		components: {
			TbarNav
		},
		data() {
			return {
				dataList: [],
				uid: '',
				
				type: 0,
				locationObj: {},
				baseUrl: this.$baseUrl
			}
		},
		watch:{
			dataList(newVal, oldVal) {
				if (Object.keys(this.locationObj).length > 0) {
					this.updateDistance()
				} else {
					this.getLocation()
				}
		    }
		},
		onLoad(ops) {
			if (ops.uid) {
				this.uid = ops.uid;
			}
			
			if (ops.type) {
				this.type = ops.type;
			}
		},
		onShow() {
		},
		methods: {
			onJmup(url) {
				uni.navigateTo({
					url: url
				})
			},
			onTypeClick(type) {
				this.type = type;
				
				this.$refs.paging.reload();
			},
			
			onEdit(id) {
				uni.navigateTo({
					url: '/pages/reserve/activity/publish?id='+id
				})
			},
			
			onDel(index) {
				uni.showModal({
				    title: '提示',
				    content: '确认取消此活动吗？',
				    success: (res) => {
				        if (res.confirm) {
				            console.log('用户点击确定');
							userCircleDel({
								id: this.dataList[index].id
							}).then (res => {
								this.$util.Tips({
									title: res.msg,
									icon: 'success'
								});
								
								setTimeout(()=>{
									this.$refs.paging.reload();
								}, 1500);
							}).catch(err => {
								this.$util.Tips({
									title: err
								});
							})
							
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});

			},
			
			updateDistance() {
				this.$nextTick(() => {
			
				this.dataList.forEach((item,index) => {
					item.distance = this.$util.distance(
					this.locationObj.lat,
					this.locationObj.lng, 
					item.latLng.lat, 
					item.latLng.lng);
					
					this.$set(this.dataList[index],'distance',item.distance);
					// console.log('this.dataList',this.dataList[index].distance);
				})
				// console.log('this.dataList',this.dataList);
				})
			},
			getLocation() {
			    uni.getLocation({
			        type: 'gcj02', // 返回可以用于uni.openLocation的经纬度
			        success: res => {
			            console.log('当前位置信息：', res);
						this.locationObj = {
							lat: res.latitude,
							lng: res.longitude
						}
						
						this.updateDistance()
			        },
			        fail: err => {
			            console.error('获取位置信息失败', err);
			        }
			    });
			},
			
			
			queryList(pageNo, pageSize) {
				// 此处请求仅为演示，请替换为自己项目中的请求
				const params = {
					page: pageNo,
					pageSize: pageSize,
					uid: this.uid,
					pageType: 'user',
					type: this.type
				}
				getCircleList(params).then(res => {
					this.$refs.paging.complete(res.data.data);
				})
			}
		}
	}
</script>
<style>
	page {
		background: #003153;
	}
</style>
<style scoped lang="scss">
	.tab {
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 30rpx;
		color: #FFFFFF;
		.li {
			position: relative;
			height: 65rpx;
			padding: 0 30rpx;
			&.on {
				&::before {
					content: "";
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 48rpx;
					height: 8rpx;
					background: #FFFFFF;
					border-radius: 200rpx 200rpx 200rpx 200rpx;
				}
			}
		}
	}
	
	.list {
		padding: 30rpx;
		position: relative;
		z-index: 1;
		border-radius: 50rpx 50rpx 0 0;
		background-color: #003153;
		.li {
			width: 696rpx;
			
			border-radius: 25rpx 25rpx 25rpx 25rpx;
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;
			
			.desc {
				display: flex;
				align-items: flex-start;
				// padding: 15rpx;
				.le-img {
					flex: 0 0 198rpx;
					width: 198rpx;
					height: 260rpx;
					border-radius: 15rpx 15rpx 15rpx 15rpx;
				}
				.desc-info {
					width: 100%;
					color: #333;
					padding-left: 18rpx;
					.desc-title {
						height: 85rpx;
						font-weight: 500;
						font-size: 30rpx;
						color: #333;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						-webkit-line-clamp: 2;
					}
					.desc-span {
						margin-top: 10rpx;
						margin-bottom: 7rpx;
						.li {
							width: 54rpx;
							height: 32rpx;
							line-height: 32rpx;
							text-align: center;
							background: #FF6915;
							padding: 0;
							margin: 0;
							border-radius: 5rpx 5rpx 5rpx 5rpx;
							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
						}
					}
					.desc-txt {
						height: 40rpx;
						display: flex;
						align-items: center;
						font-size: 22rpx;
						color: #999;
						image {
							flex: 0 0 23rpx;
							width: 23rpx;
							height: 23rpx;
							margin-right: 10rpx;
						}
						.addres {
							width: 100%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							text{
								&:nth-child(1) {
									width: 220rpx;
									overflow: hidden;
									white-space: nowrap; 
									text-overflow: ellipsis;
								}
							}
							.juli {
								display: flex;
								align-items: center;
								image {
									margin-right:5rpx;
								}
							}
						}
					}
					.desc-mod {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-top: 10rpx;
					}
					.user-cz {
						display: flex;
						align-items: center;
						justify-content: flex-start;	
						.sbtn {
							width: 76rpx;
							height: 30rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 1rpx solid #999999;
							font-weight: 400;
							font-size: 20rpx;
							color: #999999;
							margin-left: 10rpx;
							text-align: center;
							line-height: 28rpx;
							&:nth-child(2) {
								background: #E5E5E5;
								color: #3D3D3D;
								border: 1rpx solid #E5E5E5;
							}
						}
					}
					.browsing-history {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						font-weight: 500;
						font-size: 26rpx;
						color: #999;
						position: relative;
						text {
							
							margin-right: -15rpx;
							
						}
						
						.browsing-history-tx {
							display: flex;
							align-items: center;
							margin-left: -15rpx;
							image {
								width: 32rpx;
								height: 32rpx;
								position: relative;
								border-radius: 50%;
								&:nth-child(1) {
									right: -20rpx;
									z-index: 9;
								}
								&:nth-child(2) {
									right: -10rpx;
									z-index: 8;
								}
								&:nth-child(3) {
									z-index: 1;
								}
							}
						}
					}
				}
			}
		}
	}
</style>